<template>
  <div class="setting flex flex-column">
    <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <van-cell-group inset>
      <van-cell title="昵称" is-link :value="user.nickname" @click="show_nickname"/>
      <van-cell title="密码" is-link value="******" @click="show_pwd"/>
      <van-cell title="收款地址" is-link :value="user.address" @click="show_addr"/>
      <van-cell title="下级抽成" is-link :value="user.rate+'%'" @click="show_comm"/>
    </van-cell-group>
    <van-button class="submit" @click="login_out" type="danger">退出登录</van-button>
    <!-- 修改昵称 -->
    <van-dialog v-model:show="show_nickname_dialog" title="修改昵称" show-cancel-button :before-close="edit_user">
      <van-field label-width="0" v-model="user.nickname" label="" placeholder="请输入昵称"/>
    </van-dialog>

    <!-- 修改密码 -->
    <van-dialog v-model:show="show_pwd_dialog" title="修改密码" show-cancel-button :before-close="edit_user">
      <van-field label-width="0" v-model="user.pwd" type="password" placeholder="请输入新的密码"/>
    </van-dialog>
    <!-- 修改地址 -->
    <van-dialog v-model:show="show_addr_dialog" title="修改地址" show-cancel-button :before-close="edit_user">
      <van-field label-width="0" v-model="user.address" placeholder="请输入地址"/>
    </van-dialog>
    <!-- 修改抽成 -->
    <van-dialog v-model:show="show_comm_dialog" title="修改下级抽成(%)" show-cancel-button :before-close="edit_user">
      <van-field label-width="0" v-model="user.rate" type="number" placeholder="请输入下级抽成"/>
    </van-dialog>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import {inject, ref} from 'vue'
import {showNotify} from 'vant';
import {getCurrentInstance} from "@vue/runtime-core";
const $ajax: any = inject("$ajax")
const $api: any = inject("$api")
const currentInstance: any = getCurrentInstance()
const $this = currentInstance.proxy
let show_nickname_dialog = ref<boolean>(false)
let show_pwd_dialog = ref<boolean>(false)
let show_addr_dialog = ref<boolean>(false)
let show_comm_dialog = ref<boolean>(false)
//用户信息
let user: any = ref({});

async function get_detail() {
  const data = await $ajax(
      {
        api: $api.detail,
      }
  )
  // data.data.userInfo.rate = 4;
  user.value = data.data.userInfo
}

get_detail();

function edit_user(action:any) {
  return new Promise(async (resolve) => {
    if (action === 'confirm') {
      // 拦截取消操作
      const pattern = /(T.*)$/;
      let data: any = {}
      if (user.value.nickname && user.value.nickname.length > 0) {
        data.nickname = user.value.nickname
      }
      if (user.value.address && user.value.address.length > 0) {
        data.address = user.value.address
      }
      if(!pattern.test(user.value.address)){
        showNotify({type: 'danger', message: '地址错误！'});
        resolve(true);
        return
      }
      if (user.value.pwd && user.value.pwd.length > 0) {
        data.pwd = user.value.pwd
      }
      if (user.value.rate && user.value.rate.length > 0) {
        data.rate = user.value.rate
      }
      resolve(true);
      await $ajax(
          {
            api: $api.edit,
            data: data
          }
      )
      showNotify({type: 'success', message: '修改成功！'});
    } else {
      resolve(true);
    }
  });
}
async function login_out() {
  await $ajax(
      {
        api: $api.login_out
      }
  )
}

//返回
const onClickLeft = () => {
  history.back()
}
//显示昵称修改对话框
const show_nickname = () => {
  show_nickname_dialog.value = true;
}
//显示密码改对话框
const show_pwd = () => {
  show_pwd_dialog.value = true;
}
//显示密码改对话框
const show_addr = () => {
  show_addr_dialog.value = true;
}
//显示佣金抽成对话框
const show_comm = () => {
  show_comm_dialog.value = true;
}
</script>
<style lang="less" scoped>
.setting {
  :deep(.van-cell) {
    .van-cell__value {
      flex: 3;
      font-size: 0.13rem;
    }
  }
  .submit {
    width: calc(100% - 0.6rem);
    margin-left: 0.3rem;
    margin-top: 0.4rem;
    height: 0.4rem;
  }
}

</style>
